ExtWebDropDown Sample Description

Overview

This describes a simple example of how you can use functions that inherit from ExtWebDropDown in your applications.

An implementation of the sample can be found in the EXPRESSTEST model.

A running version of the sample can be found in the delivered sample site.

Sample content

The sample shows an implementation of:

• A ProcessEntryPoint that calls a PageGenerator
• The drop down function itself
• A field using the drop down function
• A page containing the field as an output field and an EventHandler that has the field as an input field.

Implementing the sample

The implementation is found scoped by the function TestDropDown - which is also the ProcessEntryPoint.

Creating the ProcessEntryPoint

The ProcessEntryPoint is just used to make the sample available from the menu.

The ProcessEntryPoint is created using the following triples:

The drop down function

The sample shows how you can create your own drop down function for the Country entity you can find in the EXPRESSTEST model.

To have the objects for this example in one place, the function will be scoped by the TestDropDown function - in most normal situations you would probably scope the function by the Country entity.

You create the drop down by creating the following triples:

You must define a view and a BlockFetch function that will be used to populate the list of records in the drop down.

The view will sort the records by the name of the country followed by the unique identification of the country. Note that the BlockFetch functions used to populate the grids in the Ext JS framework for WebsydianExpress inherits from StatelessBlockFetch - so the views must have a unique key.

By inheriting from RRNEntityRelationalTable.Fetch, the view will scope a suitable BlockFetch for populating the grid.

Replace the view and BlockFetch to make it use the new ones:

The CountryID is a UUID - which should not be shown in the drop down - remove this from the content by the following triple:

At this point, the sort order, the content, and the function that will retrieve the data is defined - so the function is able to populate the grid.

The last thing you must define is what field the function will return when a record is selected. This is done by the following triple:

Create sample field

The sample will show how you can use the drop down function for the Country entity, even though you have another field that you want to populated with the selected value.

Create this field by creating the following triples:

To force this field to use the drop down to shown and obtain values enter the following triple:

Create parent page

This is the PageGenerator that will contain TestDropDown.CountryID as an output field - and have an EventHandler that has the field as an input field.

Create the PageGenerator:

Add the EventHandler:

Make the drop down available for the parent page

To make the Page function able to call the drop down, the Page has to comprise (or include) the drop down function. When one of these triples are available, meta code in the Page function is able to identify and call the correct drop down function.

The Page function will perform a call to the CountryDD function. Fields found in the local variables InputForChild and WsyDetails will be used for parameter mapping.

The CountryDD function has two input fields, however the function does not use the values for anything so you do not have to ensure that the data mapped to these parameters are meaningful. However, dependent on your mappings restrictions for the parameter fields, you might get some warnings about missing parameter mappings when generating the Page function. To avoid these, you can add the input parameters for the CountryDD funtion to the local variable InputForChild of the Page function:

Calling the Page from the ProcessEntryPoint

Add the following code to the edit point "Call to first PageGenerator" in the TestDropDown function:

Call TestDropDown.Page

Map with:

<TestDropDown.CountryID.*Blank>

Calling the Page from the EventHandler

Add the following code to the edit point "0 call to build of document" in the function TestDropDown.Page.Test:

Call TestDropDown.Page

Map with:

WebInput<TestDropDown.CountryID>

Write the input value to WsyDetails in the PageGenerator

Add the following code to the edit point "0 Process input" in the function TestDropDown.Page:

Set WsyDetails = Input

Generate and build

Generate and build TestDropDown and all scoped functions.

Run TestDropDown.Page._CreateTemplates and TestDropDown.CountryDD._CreateTemplates.

Deploy the generated files (8 in all) to the template folder of the site you want to test in.

Deploy the generated program objects to your WebsydianExpress installation.

Define a business process content loader with the implementation name WATSTDD.

Add this content loader to the site structure.

Test

1. Press the menu item - this should show the following page:

This shows the output field and the drop down box that has replaced the input field.

2. Open the drop down box:

This shows the available countries.

3. Select a country and press the Test button:

The EventHandler receives the selected value, transfers it as a parameter to the Page, which writes the value to WsyDetails - this value is shown for the output field and the drop down shows the value as the currently selected value.

Note that the output field has got the same format as the drop down - this is because it is handled just like the drop down box, just with another style, which means that you can't select a value in the output field.